<template>
  <div>
    <van-nav-bar title="e头条-登录" />
    <div>
      <!-- 整体表单组件 -->
      <van-form @submit="onSubmit">
        <!-- 输入框 -->
        <!-- name属性就是表单整体提交时，默认收集的
        一个提交对象，往后台发送的参数名就是name里的值
        {"用户名"："页面值"} -->
        <van-field
          v-model="user.mobile"
          required
          name="mobile"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            {
              required: true,
              message: '请填写正确的手机号',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]"
        />
        <van-field
          v-model="user.code"
          required
          type="password"
          name="code"
          label="密码"
          placeholder="请输入6位密码"
          :rules="[
            { required: true, message: '请填写密码', pattern: /^\d{6}$/ },
          ]"
        />
        <!-- native-type="submit"代表van-button原生button标签type是submit提交
        整个表单功能的按钮 -->
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :loading="isLoading"
            loading-text="正在登录..."
            :disabled="isLoading"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 引入登录接口
import { loginAPI } from "@/api/index.js";
//引入提示框
import { Notify } from "vant";
// 引入存储token方法
import { setToken } from "@/utils/token.js";

export default {
  name: "Login",
  data() {
    return {
      user: {
        mobile: "13888888888", //手机号
        code: "246810", //验证码(密码246810,定死的)
      },
      // 登录按钮加载状态
      isLoading: false,
    };
  },
  methods: {
    // 提交方法（form表单整体通过验证才触发）
    async onSubmit(values) {
      // 可以直接用values值
      // （收集到表单的输入内容，原生表单name获取的值）
      console.log("submit", values);
      // 同
      console.log(this.user);
      // 登录按钮加载状态设置为true
      this.isLoading = true;
      // 调用接口
      try {
        // loginAPI封装好了的接口
        const res = await loginAPI(this.user);
        Notify({ type: "success", message: "登录成功" });
        // 存储token
        setToken(res.data.data.token);
        // 刷新token
        localStorage.setItem("refresh_token", res.data.data.refresh_token);
        // 跳转首页
        this.$router.replace({
          path: this.$route.query.path || "/",
        });
        // this.$router.replace("/");
        console.log(res);
      } catch (err) {
        Notify({ type: "danger", message: "账号或密码错误" });
        // console.dir(err);
      }
      // 网络请求完成后，关闭按钮状态
      this.isLoading = false;
    },
  },
};
</script>

<style scoped lang="less">
/* 组件根标签类名 */
.van-nav-bar {
  background-color: #007bff;
}
// scoped尝试把此选择器后属性选择器匹配当前页面标签（选不中内部组件）
//  /deep/的作用是把属性选择器加到前面（用后代选择器的方式往里找匹配的类名）
/deep/ .van-nav-bar__title {
  color: #fff;
}
</style>